<template>
  <div class="widget-form-item">
    <div
      v-if="item.type === 'title'"
      :style="item.styles"
      style="margin-left: 5px"
    >
      {{ item.value }}
    </div>
    <component
      :is="getComponent(item.type, item.component)"
      v-else
      :key="item.prop"
      v-bind="vBind"
      :multiple="false"
      :placeholder="item.placeholder || getPlaceholder(item)"
      :value="
        ['time', 'timerange', 'checkbox'].includes(item.type)
          ? item.dicData
          : undefined
      "
    >
      <span v-if="params.html" v-html="params.html" />
    </component>
  </div>
</template>
<script>
  import avueCusImg from './components/avueCusImg.vue'
  export default {
    name: 'WidgetFormItem',
    components: { avueCusImg },
    props: {
      item: {
        type: Object,
        default: () => {
          return {}
        },
      },
      params: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        form: {},
      }
    },
    computed: {
      vBind() {
        const vBind = Object.assign(this.deepClone(this.item), this.params, {
          size: this.item.size || 'small',
          dic: this.item.dicData
            ? this.item.dicData.map((d) => {
                if (!this.item.props) return d
                const { label, value, desc } = this.item.props
                if (!label || !value) return d
                return {
                  [label]: d.label,
                  [value]: d.value,
                  [desc]: d.desc,
                }
              })
            : undefined,
          rules: this.item.rules
        })
        const event = ['change', 'blur', 'click', 'focus']
        event.forEach((e) => delete vBind[e])
        if (vBind.event) delete vBind.event
        return vBind
      },
    },
    methods: {
      getComponent(type, component) {
        const KEY_COMPONENT_NAME = 'avue-'
        let result = 'input'
        setTimeout(() => this.refreshStyle(), 40)
        if (component) {
          return component
        } else if (['array', 'img', 'url'].includes(type)) result = 'array'
        else if (type === 'select') result = 'select'
        else if (type === 'radio') result = 'radio'
        else if (type === 'checkbox') result = 'checkbox'
        else if (['time', 'timerange'].includes(type)) result = 'time'
        else if (
          [
            'dates',
            'date',
            'datetime',
            'datetimerange',
            'daterange',
            'week',
            'month',
            'year',
          ].includes(type)
        ) {
          result = 'date'
        } else if (type === 'cascader') result = 'cascader'
        else if (type === 'number') result = 'input-number'
        else if (type === 'password') result = 'input'
        else if (type === 'switch') result = 'switch'
        else if (type === 'rate') result = 'rate'
        else if (type === 'upload') result = 'upload'
        else if (type === 'slider') result = 'slider'
        else if (type === 'dynamic') result = 'dynamic'
        else if (type === 'icon') result = 'input-icon'
        else if (type === 'color') result = 'input-color'
        else if (type === 'map') result = 'input-map'
        else if (type === 'cusimg') result = 'cus-img'
        return KEY_COMPONENT_NAME + result
      },
      getPlaceholder(item) {
        const label = item.label
        if (
          [
            'select',
            'checkbox',
            'radio',
            'tree',
            'color',
            'dates',
            'date',
            'datetime',
            'datetimerange',
            'daterange',
            'week',
            'month',
            'year',
            'map',
            'icon',
          ].includes(item.type)
        ) {
          return `请选择 ${label}`
        } else return `请输入 ${label}`
      },
      refreshStyle() {
        console.log('hello')
        this.$nextTick(() => {
          // 富文本兼容导出高度
          const htmlArr = document.querySelectorAll('.widget-form-item .wangEditor_html')
          for (const val of htmlArr) {
            val.parentNode.style.display = 'none'
          }
        })
      },
    },
  }
</script>
